<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist</title>
    <script src="./js/vue.js"></script>
    <script src="./js/Store.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul,ol,li {
            list-style: none;
        }
        #root {
            width: 400px;
            min-height: 300px;
            border: 1px solid #333;
            margin: 100px auto;
        }
        ul > li {
            float: left;
            width: 199px;
            text-align: center;
            height: 40px;
            font-size: 24px;
            border-bottom: 1px solid #333;
            border-right: 1px solid #333;
        }
        ol {
            width: 100%;
            min-height: 258px;
            margin-top: 20px;
        }
        input[type="text"] {
            width: 90%;
            height: 30px;
            margin: 20px;
            padding-left: 14px;
        }
        ol > li {
            min-width: 90%;
            height: 40px;
            padding-left: 20px;
        }
    </style>
</head>

<body>
    <div id="root">
        <ul>
            <li @click="toggle()">
                todo
            </li>
            <li @click="toggle1()">
                done
            </li>
        </ul>
       
        <ol v-show="todo">
             <!-- 输入框 -->
        <input type="text" v-model.trim="cnt" @keyup.enter.ctrl="submit" placeholder="请输入内容">
            <li  v-for="(item,key,index) in todolist">
                <input type="checkbox">
                {{item.name}}
                <button :id="item.id" @click="del">删除</button>
                <button :id="item.id" @click="finish" >已完成</button>
            </li>
        </ol>
        <ol v-show="done" style="margin-top: 60px;">
            <li v-for="(item,key,index) in donelist">
                <input type="checkbox">
                {{item.name}}
                <button :id="item.id" @click="del">删除</button>
                <button :id="item.id" @click="unfinish">未完成</button>
            </li>
        </ol>
    </div>
    <script>
        const store = new Store;
        const key = ['todolist','donelist']
        const vm = new Vue({
            el:'#root',
            data:{
                cnt:'',
                todolist:store.get(key[0]),
                donelist:store.get(key[1]),
                todo:true,
                done:false,
                keyword:['admin','小明','小刚']
            },
            methods: {
                toggle(){
                    this.todo = true;
                    this.done = false
                },
                toggle1(){
                    this.todo = false;
                    this.done = true
                },
                // 添加
                submit(ev){
                    if(this.cnt.length <= 2) return alert('输入内容太少啦!')
                    if (this.cnt.length >= 10) return alert('输入内容太多啦!')

                    // 敏感词不可以提交!!!!!!!!!!!!!!!!!!!!!!!!
                   
                    this.keyword.forEach(item => {
                        if(this.cnt.indexOf(item) !== -1){
                            return  alert('输入内容包含关键词!') 
                        }
                        return
                    })
                    this.todolist = store.get(key[0])
                    console.log(this.todolist);
                    this.todolist.push({id:Date.now(),name:this.cnt})
                    console.log( this.todolist);
                    store.set(key[0],this.todolist)
                     // 敏感词不可以提交!!!!!!!!!!!!!!!!!!!!!!!!
                },
                // 删除
                del(ev){
                    this.todolist = this.todolist.filter((item) => {
                        return item.id  !== ev.target.id - 0
                    })
                    store.set(key[0],this.todolist)
                    this.donelist = this.donelist.filter((item) => {
                        return item.id  !== ev.target.id - 0
                    })
                    store.set(key[1],this.donelist)
                },
                finish(ev){
                    console.log(ev.target.id);
                    const arr =  this.todolist.filter((item) => {
                        return item.id  === ev.target.id - 0
                    })
                    this.todolist = this.todolist.filter((item) => {
                        return item.id  !== ev.target.id - 0
                    })
                    store.set(key[0],this.todolist)
                    console.log(arr[0]);
                    this.donelist = store.get(key[1])
                    this.donelist.push(arr[0])
                    console.log(this.donelist);
                    store.set(key[1],this.donelist)
                },
                unfinish(ev){
                    console.log(ev.target.id);
                    const arr =  this.donelist.filter((item) => {
                        return item.id  === ev.target.id - 0
                    })
                    this.donelist = this.donelist.filter((item) => {
                        return item.id  !== ev.target.id - 0
                    })
                    store.set(key[1],this.donelist)
                    console.log(arr[0]);
                    this.todolist = store.get(key[0])
                    this.todolist.push(arr[0])
                    console.log(this.todolist);
                    store.set(key[0],this.todolist)
                }
                
            },
        })
    </script>
</body>

</html>